<!--
 * @Description:
 * @Author: jiangsx
 * @Date: 2021-06-24 17:08:19
 * @LastEditors: jiangsx
 * @LastEditTime: 2021-06-27 22:12:46
-->
<template>
  <!-- 资讯评论审核 -->
  <div>
    <!-- 表单验证头 -->
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-button type="danger" @click="moreDel">批量删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.keywords"
            placeholder="请输入关键字"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="comment" label="评论内容" align="center" />
        <el-table-column prop="userId" label="评论人编号" align="center" />
        <el-table-column prop="articleId" label="资讯编号" align="center" />
        <el-table-column prop="commentTime" label="评论时间" align="center" />
        <el-table-column prop="status" label="评论状态" align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.status === '通过'"
              class="el-tag el-tag--success el-tag--small el-tag--light"
            >{{ a }}</span>
            <span
              v-else-if="scope.row.status === '未审核'"
              class="el-tag el-tag--info el-tag--small el-tag--light"
            >{{ b }}</span>
            <span
              v-else
              class="el-tag el-tag--danger el-tag--small el-tag--light"
            >{{ c }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status === '未审核'">
              <a
                type="text"
                size="small"
                class="warning_info"
                @click="del(scope.row)"
              >删除</a>
              <a
                type="text"
                size="small"
                class="green_info"
                @click="pass(scope.row)"
              >通过</a>
              <a
                type="text"
                size="small"
                class="red_info"
                @click="unpass(scope.row)"
              >不通过</a>
            </span>
            <span v-else>
              <a
                type="text"
                size="small"
                class="warning_info"
                @click="del(scope.row)"
              >删除</a>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 跳转分页 -->
    <div class="block" style="float: right">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[10, 2, 5, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { batchDelete, check, deleteById, pageQuery } from '@/api/infoComment'
import { log } from '@antv/g2plot/lib/utils'
export default {
  data() {
    return {
      a: '通过',
      b: '未审核',
      c: '不通过',
      tableData: [],
      formInline: {
        keywords: ''
      },
      params: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      tableData2: [],
      moreDele: ''
    }
  },
  computed: {},
  created() {
    this.pageQueryGain()
  },
  mounted() {},
  methods: {
    // 当表格发生变化时,参数代表发生变化的那一行的数据
    handleSelectionChange(val) {
      const result = val.map((item) => item.id)
      this.moreDele = result.toString()
      // console.log(this.moreDele);
    },
    // 批量删除
    async moreDel() {
      await batchDelete({ ids: this.moreDele })
      this.clickPageQuery()
    },
    // 审核通过的点击
    async pass(a) {
      await check({ id: a.id, status: this.a })
      this.clickPageQuery()
    },

    // 审核不通过的点击
    async unpass(a) {
      await check({ id: a.id, status: this.c })
      this.clickPageQuery()
    },

    // 点击删除
    async del(a) {
      await deleteById({ id: a.id })
      this.clickPageQuery()
      // console.log(a.id);
    },
    async clickPageQuery() {
      const res = await pageQuery({
        page: this.params.page,
        pageSize: this.params.pageSize
      })
      this.params.pageSize = res.data.pageSize
      this.params.page = res.data.page
      // this.params.total = res.data.total;
      this.tableData = res.data.list
    },

    // 封装点击事件的函数
    async onSubmit() {
      if (this.formInline.keywords != '') {
        for (const key in this.formInline) {
          if (!this.formInline[key]) {
            delete this.formInline[key]
          }
        }
        const res = await pageQuery({
          page: this.params.page,
          pageSize: this.params.total,
          ...this.formInline
        })
        this.tableData = res.data.list
        this.total = res.data.total
      } else {
        const res = await pageQuery({
          ...this.params
        })
        this.params.page = res.data.page
        this.params.pageSize = res.data.pageSize
        this.tableData = res.data.list
      }
    },

    // 请求
    async pageQueryGain() {
      const res = await pageQuery({
        page: 1,
        pageSize: this.params.pageSize
      })
      this.params.total = res.data.total

      this.tableData = res.data.list
      // console.log(this.tableData);
    },

    // 跳转分页   的方法
    async handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      if (this.formInline.keywords != '') {
        this.onSubmit()
      } else {
        this.params.pageSize = val
        const res = await pageQuery({ page: 1, pageSize: val })
        // this.params.pageSize = res.data.pageSize;
        this.params.page = res.data.page
        this.params.total = res.data.total
        this.tableData = res.data.list
        // console.log(this.params.pageSize);
      }
    },
    async handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      if (this.formInline.keywords != '') {
        this.onSubmit()
      } else {
        this.params.page = val
        const res = await pageQuery({
          page: val,
          pageSize: this.params.pageSize
        })
        this.params.pageSize = res.data.pageSize
        this.params.page = res.data.page
        this.params.total = res.data.total
        this.tableData = res.data.list
      }
    }
  }
}
</script>
<style scoped>
</style>
